<template>
  <div class="consult">
    <!-- 咨询头部 -->
    <Header :title="'快速咨询'" />
    <!-- 描述/信息/接诊/解答 -->
    <div class="consult-list">
      <li>1.病情描述</li>
      <li>2.健康信息</li>
      <li>3.医生接诊</li>
      <li><van-icon name="passed" />医生解答</li>
    </div>
    <!-- 您要为谁咨询 -->
    <div class="who">
      <div class="who-title">
        <h3>您要为谁咨询</h3>
        <span
          >不想重复填写？导入历史病情<img
            src="../assets/Consult/who-title.png"
            alt=""
        /></span>
      </div>
      <van-uploader>
        <van-button icon="plus" type="primary">添加</van-button>
      </van-uploader>
    </div>
    <!-- 去过医院吗 -->
    <div class="go-hospital">
      <h3>去过医院吗</h3>
      <div class="go-button">
        <span>没去过</span>
        <span>去过</span>
      </div>
    </div>
    <!-- 哪里不舒服呢 -->
    <div class="unwell">
      <h3>哪里不舒服呢<van-icon name="question-o" /></h3>
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="3"
          autosize
          type="textarea"
          maxlength="200"
          placeholder="请详细描述您的情况"
          show-word-limit
        />
      </van-cell-group>
      <!-- 导入/上传 -->
      <div class="import">
        <li><img src="../assets/Consult/import.png" alt="" />导入医院报告</li>
        <li class="upload">
          <img src="../assets/Consult/Upload.png" alt="" />上传照片视频
        </li>
      </div>
      <!-- 复选框 -->
      <van-checkbox v-model="checked"
        >希望医生开具药品或提供用药建议</van-checkbox
      >
      <!-- 底部下一步 -->
      <van-button round type="primary">下一步</van-button>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import Header from "../components/Header.vue";

export default {
  data() {
    return {};
  },
  setup() {
    const checked = ref(true);
    return { checked };
  },
  components: {
    Header,
  },
};
</script>

<style lang="less" scoped>
.consult {
  position: relative;
  // 描述/信息/接诊/解答
  .consult-list {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
      list-style: none;
      font-size: 12px;
      color: #333;
    }
  }
  // 副标题样式
  h3 {
    width: 140px;
    font-size: 18px;
    color: #333;
    margin: 0;
  }
  // 您要为谁咨询
  .who {
    // 标题
    .who-title {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      margin: 18px 0;
      span {
        font-size: 13.5px;
        color: #333;
        display: flex;
        align-items: center;
        img {
          width: 22px;
          height: 22px;
        }
      }
    }
    /deep/ .van-button {
      width: 94px;
      height: 50px;
      border: 1px solid #999;
      border-radius: 10px;
      background: white;
      color: #333;
      font-size: 13px;
      margin-left: 20px;
    }
  }
  // 去过医院吗
  .go-hospital {
    height: 100px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 14.5px;
      color: #333;
      border: 1px solid #dfdfdf;
      border-radius: 17px;
      padding: 5px 12px;
      margin-left: 8px;
    }
    span:hover {
      color: #1398f2;
      border: 1px solid #a1c1b1;
      background: #eff6fe;
    }
  }
  // 哪里不舒服呢
  .unwell {
    padding: 0px 16px;
    h3 {
      width: 100%;
      .van-icon {
        width: 32px;
        height: 32px;
        color: #bbbabf;
        margin-left: 11px;
      }
    }
    /deep/ .van-cell-group {
      width: 100%;
      margin-left: 0;
    }
    /deep/ .van-cell {
      padding-left: 0;
    }
    .import {
      display: flex;
      li {
        list-style: none;
        font-size: 16.5px;
        color: #333333;
        display: flex;
        align-items: center;
        img {
          width: 22px;
          height: 22px;
        }
      }
      .upload {
        margin-left: 40px;
      }
    }
  }
  // 复选框
  .van-checkbox {
    font-size: 14px;
    margin-top: 26px;
  }
  /deep/ .van-checkbox__label {
    color: #999999;
  }
  // 底部下一步
  .van-button {
    width: 345px;
    height: 47px;
    /deep/ .van-button__text {
      font-size: 18px;
    }
  }
  .van-button--round {
    position: fixed;
    bottom: 35px;
  }
}
</style>
